<template>
  <!-- 搜索区域 -->
  <div class="search-container">
    <!-- 搜索表单卡片 -->
    <el-card shadow="never" class="search-card">
      <!-- 表单容器 -->
      <el-form :inline="true" :model="searchForm" class="search-form" label-width="90px">
        <!-- 供应商名称搜索项 -->
        <el-form-item label="供应商名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入供应商名称"
            clearable
            @keyup.enter="handleSearch"
            class="search-input"
          />
        </el-form-item>

        <!-- 联系人搜索项 -->
        <el-form-item label="联系人">
          <el-input
            v-model="searchForm.contact"
            placeholder="请输入联系人"
            clearable
            @keyup.enter="handleSearch"
            class="search-input"
          />
        </el-form-item>

        <!-- 联系电话搜索项 -->
        <el-form-item label="联系电话">
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入联系电话"
            clearable
            @keyup.enter="handleSearch"
            class="search-input"
          />
        </el-form-item>

        <!-- 操作按钮组 -->
        <el-form-item class="button-group">
          <!-- 搜索按钮 -->
          <el-button type="primary" @click="handleSearch" class="search-button">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <!-- 重置按钮 -->
          <el-button @click="handleReset" class="reset-button">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <!-- 表格区域 -->
  <el-card class="table-card">
    <!-- 表格头部 -->
    <template #header>
      <div class="table-header">
        <span>供应商列表</span>
        <div>
          <!-- 批量删除按钮 -->
          <el-button
            type="danger"
            @click="handleBatchDelete"
            :disabled="selectedSuppliers.length === 0"
            class="batch-delete-button"
          >
            <el-icon>
              <Delete />
            </el-icon>
            批量删除
          </el-button>
          <!-- 批量导入按钮 -->
          <el-button type="success" @click="handleImport" class="import-button">
            <el-icon>
              <Upload />
            </el-icon>
            批量导入
          </el-button>
          <!-- 新增供应商按钮 -->
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增供应商
          </el-button>
        </div>
      </div>
    </template>

    <!-- 供应商数据表格 -->
    <el-table
      border
      :data="supplierList"
      :show-overflow-tooltip="true"
      v-loading="loading"
      class="supplier-table"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选列 -->
      <el-table-column type="selection" width="55" />
      <!-- 供应商编号列 -->
      <el-table-column prop="supplier_id" label="编号" width="80" />
      <!-- 供应商名称列 -->
      <el-table-column prop="supplier_name" label="供应商名称" min-width="150" />
      <!-- 联系人列 -->
      <el-table-column prop="contact_person" label="联系人" min-width="120" />
      <!-- 联系电话列 -->
      <el-table-column prop="phone" label="联系电话" min-width="120" />
      <!-- 供应商地址列 -->
      <el-table-column prop="address" label="地址" min-width="200" :show-overflow-tooltip="true" />
      <!-- 创建时间列 -->
      <el-table-column prop="created_at" label="创建时间" width="160">
        <template #default="{ row }">
          {{ formatDate(row.created_at) }}
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="{ row }">
          <!-- 查看按钮 -->
          <el-button type="info" size="small" @click="handleView(row)">
            查看
          </el-button>
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-card>

  <!-- 供应商详情对话框 -->
  <el-dialog
    v-model="detailDialogVisible"
    title="供应商详情"
    width="700px"
    :close-on-click-modal="false"
  >
    <!-- 详情内容区域（带加载状态） -->
    <div v-loading="detailLoading" class="detail-container">
      <!-- 供应商详情描述列表 -->
      <el-descriptions :column="1" border>
        <!-- 供应商编号项 -->
        <el-descriptions-item label="供应商编号">
          {{ supplierDetail.supplier_id || '-' }}
        </el-descriptions-item>
        <!-- 供应商名称项 -->
        <el-descriptions-item label="供应商名称">
          {{ supplierDetail.supplier_name || '-' }}
        </el-descriptions-item>
        <!-- 联系人项 -->
        <el-descriptions-item label="联系人">
          {{ supplierDetail.contact_person || '-' }}
        </el-descriptions-item>
        <!-- 联系电话项 -->
        <el-descriptions-item label="联系电话">
          {{ supplierDetail.phone || '-' }}
        </el-descriptions-item>
        <!-- 供应商地址项 -->
        <el-descriptions-item label="供应商地址">
          {{ supplierDetail.address || '-' }}
        </el-descriptions-item>
        <!-- 创建时间项 -->
        <el-descriptions-item label="创建时间">
          {{ formatDate(supplierDetail.created_at) || '-' }}
        </el-descriptions-item>
        <!-- 更新时间项 -->
        <el-descriptions-item label="更新时间">
          {{ formatDate(supplierDetail.updated_at) || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleEditFromDetail">
          编辑供应商
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑供应商对话框 -->
  <el-dialog
    v-model="editDialogVisible"
    :title="editingSupplier.supplier_id ? '编辑供应商' : '新增供应商'"
    width="500px"
    :close-on-click-modal="false"
    @close="handleEditClose"
  >
    <!-- 编辑表单（带加载状态） -->
    <el-form
      ref="editFormRef"
      :model="editingSupplier"
      :rules="editRules"
      label-width="80px"
      v-loading="editLoading"
    >
      <!-- 供应商名称表单项 -->
      <el-form-item label="供应商名称" prop="supplier_name">
        <el-input
          v-model="editingSupplier.supplier_name"
          placeholder="请输入供应商名称"
        />
      </el-form-item>

      <!-- 联系人表单项 -->
      <el-form-item label="联系人" prop="contact_person">
        <el-input
          v-model="editingSupplier.contact_person"
          placeholder="请输入联系人"
        />
      </el-form-item>

      <!-- 联系电话表单项 -->
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="editingSupplier.phone"
          placeholder="请输入联系电话"
        />
      </el-form-item>

      <!-- 供应商地址表单项 -->
      <el-form-item label="供应商地址" prop="address">
        <el-input
          v-model="editingSupplier.address"
          placeholder="请输入供应商地址"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="saveLoading">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 批量导入对话框 -->
  <el-dialog v-model="importDialogVisible" title="批量导入供应商" width="500px" :close-on-click-modal="false">
    <el-form ref="importFormRef" :model="importForm" label-width="100px">
      <!-- 文件上传表单项 -->
      <el-form-item label="选择Excel文件" prop="file">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :limit="1"
          accept=".xlsx,.xls"
        >
          <el-icon class="el-icon--upload">
            <UploadFilled />
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              请上传.xlsx或.xls格式的Excel文件
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <!-- 下载模板按钮 -->
      <el-form-item>
        <el-button type="primary" link @click="downloadTemplate">
          <el-icon>
            <Download />
          </el-icon>
          下载导入模板
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleImportSubmit" :loading="importLoading">
          导入
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 供应商管理页面组件选项配置
 */
defineOptions({
  name: 'SupplierView'
})

// 从Vue中导入所需的API
import { ref, reactive, onMounted } from 'vue'
import * as XLSX from 'xlsx';

// 导入Element Plus组件和相关API
import { ElMessage, ElMessageBox } from 'element-plus'

// 导入图标组件
import { Search, Refresh, Plus, Upload, UploadFilled, Download, Delete } from '@element-plus/icons-vue'

// 导入供应商相关的API函数
import {
  getSupplierList,
  getSupplierById,
  createSupplier,
  updateSupplier,
  deleteSupplier,
  importSuppliers,
  batchSupplierOperation
} from '@/api/Suppliers'

// 响应式数据定义
const supplierList = ref([])           // 供应商列表数据
const loading = ref(false)             // 列表加载状态
const total = ref(0)                   // 总数据条数
const currentPage = ref(1)             // 当前页码
const pageSize = ref(10)               // 每页条数
const selectedSuppliers = ref([])      // 选中的供应商列表

// 搜索表单数据
const searchForm = reactive({
  name: '',      // 供应商名称搜索条件
  contact: '',   // 联系人搜索条件
  phone: ''      // 联系电话搜索条件
})

// 导入表单数据
const importForm = reactive({
  file: null
})

// 详情对话框相关状态
const detailDialogVisible = ref(false)  // 详情对话框显示状态
const detailLoading = ref(false)        // 详情加载状态
const supplierDetail = ref({})          // 供应商详情数据

// 编辑对话框相关状态
const editDialogVisible = ref(false)    // 编辑对话框显示状态
const editLoading = ref(false)          // 编辑加载状态
const saveLoading = ref(false)          // 保存按钮加载状态
const editFormRef = ref(null)           // 编辑表单引用
const editingSupplier = ref({           // 正在编辑的供应商数据
  supplier_name: '',
  contact_person: '',
  phone: '',
  address: ''
})

// 批量导入对话框相关状态
const importDialogVisible = ref(false)  // 导入对话框显示状态
const importLoading = ref(false)        // 导入按钮加载状态
const importFormRef = ref(null)         // 导入表单引用
const uploadRef = ref(null)             // 上传组件引用
const importFile = ref(null)            // 导入的文件

// 编辑表单验证规则
const editRules = {
  supplier_name: [
    { required: true, message: '请输入供应商名称', trigger: 'blur' }
  ],
  contact_person: [
    { required: true, message: '请输入联系人', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的电话号码', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入供应商地址', trigger: 'blur' }
  ]
}

/**
 * 格式化日期显示
 * @param {string} date - 日期字符串
 * @returns {string} 格式化后的日期
 */
const formatDate = (date) => {
  if (!date) return '-'
  const d = new Date(date)
  return d.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

/**
 * 获取供应商列表数据
 */
const getSupplierListData = async () => {
  try {
    loading.value = true

    // 构建分页参数对象，包含搜索条件
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      // 添加搜索参数
      name: searchForm.name,
      contact: searchForm.contact,
      phone: searchForm.phone
    }

    // 调用API获取供应商列表
    const res = await getSupplierList(params)

    // 更新分页相关信息
    if (res.pagination) {
      total.value = res.pagination.totalCount || 0
      currentPage.value = res.pagination.currentPage || 1
      pageSize.value = res.pagination.pageSize || 10
    }

    // 根据实际API响应结构调整数据赋值
    if (res.data && Array.isArray(res.data)) {
      supplierList.value = res.data
    } else if (res.suppliers && Array.isArray(res.suppliers)) {
      supplierList.value = res.suppliers
    } else if (Array.isArray(res)) {
      supplierList.value = res
    } else {
      supplierList.value = []
    }
  } catch (error) {
    console.error('获取供应商列表失败:', error)
    ElMessage.error('获取供应商列表失败，请稍后重试！')
  } finally {
    loading.value = false
  }
}

/**
 * 页码改变事件处理函数
 * @param {number} page - 新的页码
 */
const handlePageChange = (page) => {
  currentPage.value = page
  getSupplierListData()
}

/**
 * 每页条数改变事件处理函数
 * @param {number} size - 新的每页条数
 */
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
  getSupplierListData()
}

/**
 * 搜索按钮点击事件处理函数
 */
const handleSearch = () => {
  console.log('执行搜索:', searchForm)
  // 根据分页功能实现规范：搜索操作时重置到第一页
  currentPage.value = 1
  getSupplierListData()
}

/**
 * 重置按钮点击事件处理函数
 */
const handleReset = () => {
  console.log('重置搜索条件')
  // 清空搜索表单
  Object.assign(searchForm, {
    name: '',
    contact: '',
    phone: ''
  })
  // 重置到第一页
  currentPage.value = 1
  getSupplierListData()
}

/**
 * 查看供应商详情
 * @param {Object} row - 供应商数据行
 */
const handleView = async (row) => {
  console.log('查看供应商:', row)

  try {
    detailDialogVisible.value = true
    detailLoading.value = true

    // 调用API获取供应商详情
    const response = await getSupplierById(row.supplier_id)

    // 根据实际API响应结构调整数据赋值
    if (response.data) {
      supplierDetail.value = response.data
    } else if (response.supplier) {
      supplierDetail.value = response.supplier
    } else {
      supplierDetail.value = response
    }
  } catch (error) {
    console.error('获取供应商详情失败:', error)
    ElMessage.error('获取供应商详情失败，请稍后重试！')

    // 如果API调用失败，使用列表中的数据作为后备方案
    supplierDetail.value = row
  } finally {
    detailLoading.value = false
  }
}

/**
 * 从详情对话框跳转到编辑
 */
const handleEditFromDetail = () => {
  detailDialogVisible.value = false
  handleEdit(supplierDetail.value)
}

/**
 * 新增供应商按钮点击事件处理函数
 */
const handleAdd = () => {
  // 重置编辑表单数据
  editingSupplier.value = {
    supplier_name: '',
    contact_person: '',
    phone: '',
    address: ''
  }
  editDialogVisible.value = true
}

/**
 * 编辑供应商
 * @param {Object} row - 供应商数据行
 */
const handleEdit = (row) => {
  console.log('编辑供应商:', row)

  // 填充编辑表单数据
  editingSupplier.value = { ...row }
  editDialogVisible.value = true
}

/**
 * 编辑对话框关闭事件处理函数
 */
const handleEditClose = () => {
  // 重置表单验证状态
  editFormRef.value?.resetFields()
}

/**
 * 保存供应商信息（新增或编辑）
 */
const handleSave = async () => {
  // 表单验证
  try {
    await editFormRef.value.validate()
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.warning('请填写完整的供应商信息')
    return
  }

  try {
    saveLoading.value = true

    // 准备提交数据
    const submitData = {
      supplier_name: editingSupplier.value.supplier_name,
      contact_person: editingSupplier.value.contact_person,
      phone: editingSupplier.value.phone,
      address: editingSupplier.value.address
    }

    // 根据是否有supplier_id判断是新增还是编辑
    let response;
    if (editingSupplier.value.supplier_id) {
      // 编辑供应商
      response = await updateSupplier(
        editingSupplier.value.supplier_id,
        submitData
      )
    } else {
      // 新增供应商
      response = await createSupplier(submitData)
    }

    // 检查响应中是否有错误信息
    if (response && response.status !== 0) {
      throw new Error(response.message || response.msg || '操作失败')
    }

    ElMessage.success(response.message || response.msg || (editingSupplier.value.supplier_id ? '更新供应商成功！' : '新增供应商成功！'))

    // 关闭编辑对话框
    editDialogVisible.value = false

    // 重新加载列表数据
    getSupplierListData()
  } catch (error) {
    console.error('保存供应商失败:', error)
    // 检查是否是供应商名称重复的错误
    const errorMsg = error.msg || error.message || (error.response && error.response.data && (error.response.data.msg || error.response.data.message)) || '请稍后重试！';
    if (errorMsg.includes('已存在')) {
      ElMessage.error(`保存供应商失败：${errorMsg}`)
    } else {
      ElMessage.error(`保存供应商失败：${errorMsg}`)
    }
  } finally {
    saveLoading.value = false
  }
}

/**
 * 删除供应商
 * @param {Object} row - 供应商数据行
 */
const handleDelete = async (row) => {
  try {
    // 使用ElMessageBox进行二次确认
    await ElMessageBox.confirm(
      `确定要删除供应商 "${row.supplier_name}" 吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )

    // 调用删除API
    await deleteSupplier(row.supplier_id)

    // 删除成功提示
    ElMessage.success('删除供应商成功！')

    // 重新加载列表数据
    // 如果当前页只有一条数据且不是第一页，则回退到上一页
    if (supplierList.value.length === 1 && currentPage.value > 1) {
      currentPage.value = currentPage.value - 1
    }
    getSupplierListData()
  } catch (error) {
    // 用户取消删除或删除失败处理
    handleDeleteError(error)
  }
}

/**
 * 处理删除供应商错误
 * @param {Error} error - 错误对象
 */
const handleDeleteError = (error) => {
  if (error !== 'cancel') {
    const errorMsg = error.message || (error.response && error.response.data && (error.response.data.message || error.response.data.msg)) || '请稍后重试！';
    console.error('删除供应商失败:', errorMsg)
    ElMessage.error(`删除供应商失败：${errorMsg}`)
  }
}

/**
 * 批量导入按钮点击事件处理函数
 */
const handleImport = () => {
  // 重置导入表单
  importFormRef.value?.resetFields()
  // 清空上传文件
  uploadRef.value?.clearFiles()
  importFile.value = null
  // 显示导入对话框
  importDialogVisible.value = true
}

/**
 * 文件选择变化事件处理函数
 * @param {Object} file - 上传的文件对象
 */
const handleFileChange = (file) => {
  importFile.value = file.raw
}

/**
 * 文件移除事件处理函数
 */
const handleFileRemove = () => {
  importFile.value = null
}

/**
 * 批量导入提交事件处理函数
 */
const handleImportSubmit = async () => {
  // 检查是否选择了文件
  if (!importFile.value) {
    ElMessage.warning('请选择要导入的Excel文件')
    return
  }

  try {
    importLoading.value = true

    // 调用API导入供应商
    const response = await importSuppliers(importFile.value)
    console.log('导入响应:', response) // 添加日志以便调试

    // 检查响应中是否有错误信息
    if (response && response.status !== 0) {
      throw new Error(response.message || response.msg || '导入失败')
    }

    // 导入成功提示
    ElMessage.success(response.message || response.msg || '供应商导入成功！')

    // 关闭导入对话框
    importDialogVisible.value = false

    // 重新加载供应商列表
    currentPage.value = 1
    getSupplierListData()
  } catch (error) {
    console.error('导入供应商失败:', error)

    // 显示具体的错误信息
    const errorMessage = error.response?.data?.message ||
                         error.message ||
                         error.msg ||
                         '供应商导入失败，请稍后重试！'

    ElMessage.error(errorMessage)
  } finally {
    importLoading.value = false
  }
}

/**
 * 下载导入模板
 */
const downloadTemplate = () => {
  // 创建一个工作簿
  const wb = XLSX.utils.book_new();

  // 创建示例数据
  const data = [
    ['供应商名称', '联系电话', '联系人', '供应商地址'],
    ['示例供应商1', '13800138001', '张三', '上海市浦东新区示例路123号'],
    ['示例供应商2', '13800138002', '李四', '北京市朝阳区示例街456号'],
    ['示例供应商3', '13800138003', '王五', '广州市天河区示例大道789号']
  ];

  // 创建工作表
  const ws = XLSX.utils.aoa_to_sheet(data);

  // 设置列宽
  ws['!cols'] = [
    { wch: 15 }, // 供应商名称
    { wch: 15 }, // 联系电话
    { wch: 10 }, // 联系人
    { wch: 30 }  // 供应商地址
  ];

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, '供应商导入模板');

  // 导出文件
  XLSX.writeFile(wb, '供应商导入模板.xlsx');
}

/**
 * 处理表格选择变化
 * @param {Array} selection - 选中的行数据
 */
const handleSelectionChange = (selection) => {
  selectedSuppliers.value = selection;
};

/**
 * 批量删除供应商
 */
const handleBatchDelete = async () => {
  try {
    // 使用ElMessageBox进行二次确认
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedSuppliers.value.length} 个供应商吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )

    // 准备要删除的供应商ID数组
    const supplierIds = selectedSuppliers.value.map(supplier => supplier.supplier_id)

    // 调用批量删除API
    const data = {
      action: 'delete',
      data: {
        ids: supplierIds
      }
    }

    await batchSupplierOperation(data)

    // 删除成功提示
    ElMessage.success('批量删除供应商成功！')

    // 清空选中项
    selectedSuppliers.value = []

    // 重新加载列表数据
    // 如果当前页所有数据都被删除且不是第一页，则回退到上一页
    if (selectedSuppliers.value.length === supplierList.value.length && currentPage.value > 1) {
      currentPage.value = currentPage.value - 1
    }
    getSupplierListData()
  } catch (error) {
    // 用户取消删除
    if (error === 'cancel') {
      return
    }
    // 删除失败处理
    const errorMessage = error.response?.data?.message ||
                         error.response?.data?.msg ||
                         error.message ||
                         '批量删除供应商失败，请稍后重试！'
    ElMessage.error(errorMessage)
  }
};

// 组件挂载时获取供应商列表数据
onMounted(() => {
  getSupplierListData()
})
</script>

<style scoped>
/**
 * 供应商管理页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 搜索容器样式 */
.search-container {
  margin-bottom: 20px;
}

/* 搜索卡片样式 */
.search-card {
  border: 1px solid #e4e7ed;
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 0;
}

/* 搜索表单项样式 */
.search-form .el-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* 搜索输入框样式 */
.search-input {
  width: 200px;
}

/* 搜索选择框样式 */
.search-select {
  width: 200px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
  margin-left: auto !important;
}

/* 搜索按钮样式 */
.search-button {
  white-space: nowrap;
}

/* 重置按钮样式 */
.reset-button {
  white-space: nowrap;
}

/* 供应商数据表格 */
.supplier-table {
  width: 100%;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格头部样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 分页容器样式 */
.pagination-container {
  text-align: right;
  margin-top: 20px;
}

/* 详情容器样式 */
.detail-container {
  min-height: 200px;
}

/* 对话框底部操作区域样式 */
.dialog-footer {
  text-align: right;
}

/* 价格列样式 */
.price-column {
  text-align: right;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .el-form-item {
    width: 100%;
  }

  .search-input,
  .search-select {
    width: 100%;
  }

  .button-group {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }
}
</style>
